<template>
  <div class="main-content notice-wrapper">
    <div class="content-box">
      <div class="top-box">
        <div class="title-box">
          <p class="title">公告设置</p>
        </div>

        <el-button type="primary" @click="addFn">新增</el-button>
      </div>

      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <span>{{ scope.row.index }}</span>
        </template>
        <template v-slot:operate="scope">
          <el-text type="primary" @click="editFn(scope.row)"> 编辑 </el-text>
          <el-text type="primary" @click="deleteFn(scope.row)"> 删除 </el-text>
        </template>
      </ct-table>

      <ct-pagination :options="pageOptions" :pageEvent="getListData">
      </ct-pagination>
    </div>

    <AddOrEditNotice
      v-model:show="operateData.show"
      :data="operateData.data"
      v-if="operateData.show"
      @updateList="getListData"
    />
  </div>
</template>

<script setup>
import { getNoticeList, removeNotice } from "@/api/index";

const { proxy } = getCurrentInstance();

import CtTable from "@/components/CtTable.vue";
import CtPagination from "@/components/Pagination.vue";
import AddOrEditNotice from "./dialog/AddOrEditNotice.vue";

import { usePageOptions } from "@/hooks/usePageOptions";
import { ElMessage } from "element-plus";
const { pageOptions } = usePageOptions();

let tableOptions = reactive({
  data: [],
  loading: false,
  columns: [
    {
      label: "序号",
      prop: "index",
      width: 80,
      isCustom: true,
    },
    {
      label: "发布日期",
      prop: "createTime",
      width: 200,
    },
    {
      label: "内容",
      prop: "content",
    },
    {
      label: "操作",
      prop: "operate",
      width: 160,
      isCustom: true,
    },
  ],
});

function getListData() {
  tableOptions.loading = true;
  const { currentPage, pageSize } = pageOptions;

  getNoticeList({
    offset: currentPage ,
    limit: pageSize,
  })
    .then((res) => {
      const { rows, total } = res.data;
      if (rows.length) {
        for (let i = 0; i < rows.length; i++) {
          rows[i].index = proxy.$handleIndex(i, pageOptions);
        }
      }
      tableOptions.data = rows;
      tableOptions.loading = false;
      pageOptions.total = total;
    })
    .catch(() => {
      tableOptions.loading = false;
    });
}

let operateData = reactive({
  show: false,
  data: {
    type: 1,
  },
});

function addFn() {
  operateData.show = true;
  operateData.data = {
    type: 1,
  };
}

function editFn(item) {
  operateData.show = true;
  operateData.data = {
    id: item.id,
    content: item.content,
    type: 2,
  };
}

function deleteFn(item) {
  ElMessageBox.confirm("确认删除这条公告吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      removeNotice({
        id: item.id,
      }).then((res) => {
        ElMessage.success("已删除");
        getListData();
      });
    })
    .catch(() => {});
}

onMounted(() => {
  getListData();
});
</script>

<style lang="scss" scoped>
.notice-wrapper {
  .content-box {
    .top-box {
      margin-bottom: 20px;
      .title-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        .title {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
